<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.track{width: 2px;height: 2px;background-color:#000;position:absolute;}
</style>
</head>
<body>
<label for="a" id="labelA">参数a：100</label>
<input id="a" type="range"  min="50" max="100" step="10" value="100" />
<label for="b" id="labelB">参数b：1</label>
<input id="b" type="range" min="1" max="5" step="1"  value="1" />
<button id="reset">还原</button>
<span>三角函数的公式为: y = a*sin(b*x)</span>
<span id="result">所以，实际公式为:y = 100*sin(1*x)</span>

<div id="test" style="height: 50px;width: 50px;background-color: pink;border-radius:50%;position: absolute;left: 30px;top:50px;"></div>

<script>
reset.onclick = function(){
    history.go();
}
function createTracks(x,y){
    var ele = document.createElement('div');
    ele.className = 'track';
    ele.style.left = x + 'px';
    ele.style.top = y + 'px';
    document.body.appendChild(ele);
}
function deleteTracks(){
    var eles = document.getElementsByTagName('div');
    for(var i = 0 ;i < eles.length; i++){
        if(eles[i].className == 'track'){
            document.body.removeChild(eles[i]);
            i--;
        }
    }
}
function getResult(){
    result.innerHTML = '所以，实际公式为: y=' + a.value + '*sin(' + b.value + '*x)';
}

show();
function show(){
    clearInterval(test.timer);
    //重置left、top值
    test.style.left = 30 + 'px';
    test.style.top = 50 + 'px';
    //声明定时器运行次数
    var n = 0;
    //声明拓展倍数
    var value = 100;
    //清除轨迹
    deleteTracks();
    test.timer = setInterval(function(){
        var A = Number(a.value);
        var B = Number(b.value);
        n++;
        var x = (B*n)*Math.PI/180;
        var y = A*Math.sin(x);
        test.style.left = x*value + 'px';
        test.style.top = 2*A+y + 'px';
        createTracks(x*value,2*A+y);
        if(x*value >= document.documentElement.clientWidth - 2*test.offsetWidth){
            clearInterval(test.timer)
        }
    },20)
}

a.oninput = function(){
    labelA.innerHTML = '参数a：' + this.value;
    getResult();
    show();
}
b.oninput = function(){
    labelB.innerHTML = '参数b：' + this.value;
    getResult();
    show();
}
</script>
</body>
</html>